iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
自我挑戰組

我的日常學習雜記與筆記整理系列 第 22

Day - 22 函式(五) 調用 - this 筆記

  • 分享至 

  • xImage
  •  

this

  • this 為關鍵字,並不能像變數或是方法的屬性一樣指定值給它。
  • this 沒有 scope
  • 巢狀函式中的內層函式不會繼承外層函式的this值,必須先在內層函式中的宣告一個變數儲存外層函式的 this作為它的值才能存取。
  • this 值在所有函式以外的全域執行環境下,會是全域物件,與是否處於嚴格模式並無關係。
  • 內層函式被當作函式調用,它的this值在非嚴格模式下會是全域物件:
function Fruit() {
    this.type = 'apple';
    var self = this;      // 存取外層函式的 this 值
    function showType() { // inner function
        console.log(this);  // 取得全域物件(在瀏覽器中通常是window物件)
        console.log(self.type); // 使用 self 來取得外層函式的 this 值
    }
    showType();
}

var myFruit = new Fruit();
  • 內層函式被當作函式調用,它的this值在嚴格模式下會是 undefined:
"use strict"; 
function Fruit() {
    this.type = 'apple';
    var self = this; 
    function showType() { 
        console.log(this);  // undefined
        console.log(self.type); 
    }
    showType();
}

var myFruit = new Fruit();

showType 是一個內層函式,它被定義在 Fruit 函式的範疇內。當 showType 被調用時,它的 this 並不會繼承 Fruit 函式的 this 值。
Fruit 函式內部使用了變數 self 來存儲存取了外層函式 Fruitthis 值(self 變數是對新建立的 Fruit 物件的引用)。

書中範例:

var obj = {
	method: function(){  //  當一個函式作為一個物件的方法被調用時,此函式內部的 this 會被設定為調用此方法的物件(obj)
		var self = this; // 存儲 method 的 this 值
		console.log(this === obj); // true
		funcName();
	
		function funcName(){ // 直接被做為函式調用,不會繼承 method的this值
			console.log(this === obj); // false
			console.log(self === obj); // true
			console.log(this); // 取得全域物件(在瀏覽器中通常是window物件) 
		}
	}
};
obj.method();
"use strict"; 
var obj = {
	method: function(){  
		var self = this; 
		console.log(this === obj); // true
		funcName();
	
		function funcName(){ 
			console.log(this === obj); // false
			console.log(self === obj); // true
			console.log(this); // undefined 
		}
	}
};
obj.method();

參考資料:


上一篇
Day - 21 函式(五) 調用 - Method, Method Chaining 筆記
下一篇
Day - 23 Sass 編譯方式(一)
系列文
我的日常學習雜記與筆記整理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言